<template>
 <div>
    <div class="top">
        <p class="set-ico">
          <span class="set">设置</span>
          <span class="iconfont icon-shezhi-copy-copy"></span>
          
        </p>

        <div class="massage">
          <div class="box ">
           
           
          </div>
          
          <div class="reg-btn re"  v-if="!userInfo">
            <router-link to="/register">注册 / </router-link>
            <router-link to="/login">登录</router-link>
          </div>

          <div class="ext-user re" v-else>
            <span class="ext" @click="ext">退出 / </span>
            <span class="user">{{userInfo}}</span>
          </div>

        </div>

    </div>

    <van-row class="user-links">
      <van-col span="6">
        <van-icon name="pending-payment" />
        待付款
      </van-col>
      <van-col span="6">
        <van-icon name="records" />
        待接单
      </van-col>
      <van-col span="6">
        <van-icon name="tosend" />
        待发货
      </van-col>
      <van-col span="6">
        <van-icon name="logistics" />
        已发货
      </van-col>
    </van-row>

    <van-cell-group class="user-group">
      <van-cell icon="records" title="全部订单" is-link />
    </van-cell-group>

    <van-cell-group>
      <van-cell icon="points" title="我的积分" is-link />
      <van-cell icon="gold-coin-o" title="我的优惠券" is-link />
      <van-cell icon="gift-o" title="我收到的礼物" is-link />
    </van-cell-group>
  </div>
</template>

<script>
  import { Row, Col, Icon, Cell, CellGroup, Toast } from 'vant';

  export default {
     data() {
        return {
          userInfo:null
          
        }
      },
     components: {
        [Row.name]: Row,
        [Col.name]: Col,
        [Icon.name]: Icon,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup
      },
      methods: {
        reqUserInfo(){
          this.$axios.post('/zhouliang/api/user/t/info',{
              token:this.token
          })
          .then((res)=>{
              console.log(res)
              const {msg,code,info}=res
              if(code==1){
                this.userInfo=info.username

              }else{
                console.log(msg)
              }
          })

        },

        //退出
        ext(){
          localStorage.removeItem('token')
          this.token=''
          this.userInfo=null
          // location.reload()
        }

      },

      
      activated() {
        
      },

      mounted() {
        const token=localStorage.getItem('token')
        this.token=token

        this.reqUserInfo()

      },

   
    
  }
</script>

<style lang="scss" scoped>
  .top{
    background-color: #3ac149;
    .set-ico{
      display: flex;
      flex-direction: row-reverse;
      padding: 0.3rem 0.2rem 0 0;
      color: white;

      .iconfont{
        margin-right: 0.1rem;
        color: white;
      }
    }

    .massage{
        display: flex;
        align-items: center;
        padding: 0.5rem 0.3rem;
        font-size: 0.3rem;
      .box{
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background-color: rgb(223, 93, 93);
      }
      .re{
        margin-left: 0.2rem;
      }

    }



  }





  .user {
  &-poster {
    width: 100%;
    height: 53vw;
    display: block;
  }
  &-group {
    margin-bottom: 15px;
  }
  &-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    .van-icon {
      display: block;
      font-size: 24px;
    }
  }
}
</style>
